@import 'common/reset';
@import 'common/mixin';
@import 'common/common';
@import 'common/variable';
.header {
    .header-top {
        height: 0.8rem;
        padding: 0 0.1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f69014;
        i {
            font-size: 0.5rem;
            color: #FFFFFF;
        }
        span {
            font-size: 0.4rem;
            color: #fff;
        }
    }
    .prompt {
        font-size: 0;
        img {
            width: 12%;
            height: 0.7rem;
            padding: 0.1rem;
            background-color: rgb(131,131,131);
        }
        span {
            vertical-align: top;
            display: inline-block;
            width: 84.8%;
            height: 0.9rem;
            line-height: 0.9rem;
            color: #ddd;
            font-size: 0.14rem;
            background-color: #6f6f6f;
        }
    }
}
.main {
    padding: 0.2rem 0.1rem 0.4rem;
    .wait,
    .now,
    .finish {
        height: 4.5rem;
        margin-top: 0.4rem;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        .prompt {
            position: absolute;
            top: 0;
            left: 0.4rem;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 1.2rem;
            height: 0.5rem;
            text-align: center;
            line-height: 0.5rem;
            span {
                color: #fff;
            }
        }
        .top {
            text-align: center;
            border-bottom: 1px solid #DDDDDD;
            p {
                padding-top: 0.5rem;
                font-size: 0.16rem;
                color: #8D8D8D;
            }
            h2 {
                display: inline-block;
                font-size: 0.8rem;
                color: #f69014;
                margin: 0.2rem 0;
            }
            span{
                color: #f69014;
            }
        }
        .bottom {
            padding: 0.2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .address,
            .time {
                width: 50%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 0;
                img {
                    width: 30%;
                    height: 1rem;
                }
                p {
                    width: 70%;
                    span {
                        width: 100% !important;
                    }
                }
                span {
                    display: block;
                    width: 70%;
                    font-size: 0.16rem;
                }
            }
        }
        a {
            display: block;
            margin: 0 auto;
            width: 2.5rem;
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            border-radius: 0.4rem;
            font-size: 0.3rem;
        }
    }
    .wait {
        background-image: url("../img/redbackground@2x.png");
        .prompt {
            background-image: url("../img/guapai@2x.png");
        }
        .sure {
            background-color: #f42829;
            color: #fff;
        }
    }
    .now {
        background-image: url("../img/greenbackground@2x.png");
        .prompt {
            background-image: url("../img/greenguapai@2x.png");
        }
        .look {
            border: 1px solid #01B7A0;
            color: #01B7A0;
        }
    }
    .finish {
        background-image: url("../img/graybackground@2x.png");
        .prompt {
            background-image: url("../img/grayguapai@2x.png");
        }
        .top {
            h2 {
                color: #8D8D8D;
            }
            span{
                color: #8D8D8D;
            }
        }
        .look {
            background-color: #ddd;
            color: #fff;
        }
    }
}